<template>
  <el-dropdown style="margin-left: 10px">
    <span class="el-dropdown-link">
      <el-button v-if="showBtn" size="mini">打电话</el-button>
      <span v-else>打电话</span>
    </span>
    <el-dropdown-menu slot="dropdown" style="max-height: 200px; overflow: auto">
      <template v-if="phoneData && phoneData.length">
        <el-dropdown-item
          v-for="(item, index) in phoneData"
          :key="index"
          v-phone="
            item.value && item.value.indexOf('*') >= 0 && item.bakValue
              ? item.bakValue
              : item.value
          "
        >
          {{ item.value | getHideTel }}
          <i
            class="V7_iconfont V7_iconV7tubiao_bohao"
            style="font-size: 16px; margin-left: 20px"
          ></i>
        </el-dropdown-item>
      </template>
      <template v-else>
        <el-dropdown-item> 暂无电话 </el-dropdown-item>
      </template>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang="ts">
/**
 * 打电话按钮
 */
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { checkHideTel } from '@/utils/common'
@Component({
  name: 'PhoneDropdown',
  filters: {
    getHideTel (customerNumber) {
      return checkHideTel(customerNumber)
    }
  }
})
export default class PhoneDropdown extends Vue {
  @Prop() private data
  @Prop() private showBtn

  private phoneData: any = []

  @Watch('data', { immediate: true, deep: true })
  private dataChange (val) {
    if (this.data && this.data.mobile && this.data.mobile.length) {
      this.phoneData = this.data.mobile.filter(v => v.value)
    }
  }
}
</script>
